<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>FTM网上商城</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
	href="UserStyle/styles/bootstrap4/bootstrap.min.css">
<link
	href="UserStyle/plugins/font-awesome-4.7.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/plugins/OwlCarousel2-2.2.1/owl.carousel.css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/plugins/OwlCarousel2-2.2.1/animate.css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/styles/categories.css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/styles/categories_responsive.css">
<!-- 引入layui.css文件 -->
<link rel="stylesheet" href="layui/css/layui.css" media="all">

<!--1. Bootstrap core CSS -->
<link href="UserStyle/css/bootstrap.min.css" rel="stylesheet">

<!--2. Custom styles for this template -->
<link href="UserStyle/css/dashboard.css" rel="stylesheet">
<style type="text/css">
.product {
	text-align: center;
}
</style>

</head>
<body>
	<div class="super_container">

		<!-- Header -->

		<header class="header">
			<div class="header_container">
				<div class="container">
					<div class="row">
						<div class="col">
							<div
								class="header_content d-flex flex-row align-items-center justify-content-start">
								<div class="logo">
									<a href="#">FTM网上商城</a>
								</div>
								<nav class="main_nav">
									<ul>
										<li><a href="index.html">商城首页</a></li>
										<li><a href="categories.html">更多商品</a></li>

										<li><a href="#">商家入驻</a></li>
										<li><a href="contact.html">个人中心</a></li>

									</ul>
								</nav>
								<div class="header_extra ml-auto">
									<div class="shopping_cart">
										<a href="cart.html"> <svg version="1.1"
												xmlns="http://www.w3.org/2000/svg"
												xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												viewBox="0 0 489 489"
												style="enable-background: new 0 0 489 489;"
												xml:space="preserve">
											<g>
												<path
													d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
													c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
													C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
													H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
													c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z" />
											</g>
										</svg>
											<div>
												购物车 <span>(0)</span>
											</div>
										</a>
									</div>
									<div class="search">
										<div class="search_icon">
											<svg version="1.1" id="Capa_1"
												xmlns="http://www.w3.org/2000/svg"
												xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												viewBox="0 0 475.084 475.084"
												style="enable-background: new 0 0 475.084 475.084;"
												xml:space="preserve">
										<g>
											<path
													d="M464.524,412.846l-97.929-97.925c23.6-34.068,35.406-72.047,35.406-113.917c0-27.218-5.284-53.249-15.852-78.087
												c-10.561-24.842-24.838-46.254-42.825-64.241c-17.987-17.987-39.396-32.264-64.233-42.826
												C254.246,5.285,228.217,0.003,200.999,0.003c-27.216,0-53.247,5.282-78.085,15.847C98.072,26.412,76.66,40.689,58.673,58.676
												c-17.989,17.987-32.264,39.403-42.827,64.241C5.282,147.758,0,173.786,0,201.004c0,27.216,5.282,53.238,15.846,78.083
												c10.562,24.838,24.838,46.247,42.827,64.234c17.987,17.993,39.403,32.264,64.241,42.832c24.841,10.563,50.869,15.844,78.085,15.844
												c41.879,0,79.852-11.807,113.922-35.405l97.929,97.641c6.852,7.231,15.406,10.849,25.693,10.849
												c9.897,0,18.467-3.617,25.694-10.849c7.23-7.23,10.848-15.796,10.848-25.693C475.088,428.458,471.567,419.889,464.524,412.846z
												 M291.363,291.358c-25.029,25.033-55.148,37.549-90.364,37.549c-35.21,0-65.329-12.519-90.36-37.549
												c-25.031-25.029-37.546-55.144-37.546-90.36c0-35.21,12.518-65.334,37.546-90.36c25.026-25.032,55.15-37.546,90.36-37.546
												c35.212,0,65.331,12.519,90.364,37.546c25.033,25.026,37.548,55.15,37.548,90.36C328.911,236.214,316.392,266.329,291.363,291.358z
												" />
										</g>
									</svg>
										</div>
									</div>
									<div class="hamburger">
										<i class="fa fa-bars" aria-hidden="true"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Search Panel -->
			<div class="search_panel trans_300">
				<div class="container">
					<div class="row">
						<div class="col">
							<div
								class="search_panel_content d-flex flex-row align-items-center justify-content-end">
								<form action="#">
									<input type="text" class="search_input" placeholder="Search"
										required="required">
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Social -->
			<div class="header_social">
				<ul>
					<li><a href="#"><i class="fa fa-pinterest"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"
							aria-hidden="true"></i></a></li>
				</ul>
			</div>
		</header>

		<!-- Menu -->

		<div class="menu menu_mm trans_300">
			<div class="menu_container menu_mm">
				<div class="page_menu_content">

					<div class="page_menu_search menu_mm">
						<form action="#">
							<input type="search" required="required"
								class="page_menu_search_input menu_mm"
								placeholder="Search for products...">
						</form>
					</div>
					<ul class="page_menu_nav menu_mm">
						<li class="page_menu_item has-children menu_mm"><a
							href="index.html">商城首页</a></li>
						<li class="page_menu_item has-children menu_mm"><a
							href="categories.html">商品分类<i class="fa fa-angle-down"></i></a></li>
						<li class="page_menu_item menu_mm"><a href="index.html">商家入驻<i
								class="fa fa-angle-down"></i></a></li>
						<li class="page_menu_item menu_mm"><a href="contact.html">个人中心<i
								class="fa fa-angle-down"></i></a></li>
					</ul>
				</div>
			</div>

			<div class="menu_close">
				<i class="fa fa-times" aria-hidden="true"></i>
			</div>

			<div class="menu_social">
				<ul>
					<li><a href="#"><i class="fa fa-pinterest"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"
							aria-hidden="true"></i></a></li>
				</ul>
			</div>
		</div>

		<!-- Home -->

		<div class="home">
			<div class="home_container">
				<div class="home_background"
					style="background-image: url(UserStyle/images/categories.jpg)"></div>
				<div class="home_content_container">
					<div class="container">
						<div class="row">
							<div class="col">
								<div class="home_content">
									<div class="home_title">
										全新旗舰手机<span>.</span>
									</div>
									<div class="home_text">
										<p>称心称手，超值入手。</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Products -->

		<div class="products">
			<div class="container">
				<div class="row">
					<div class="col">

						<!-- Product Sorting -->
						<div
							class="sorting_bar d-flex flex-md-row flex-column align-items-md-center justify-content-md-start">
							<form>
								<div class="sorting_container ml-md-auto">
									<div class="sorting">
										<input type="text" name="keywords" placeholder="请输入商品关键字"/>
										<input type="text" style="display:none" name="op" value="showByPage">
										<input type="submit" >
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col">

						<div class="product_grid">

							<!-- ************************************************** -->
							<!-- 如果属性范围内的pd为null，我们就跳转到NewsTypeServlet去获取数据，然后再转发回来 -->
							<c:if test="${pd==null}">
								<!-- c:redirect 跳转到 CategoriesServlet -->
								<c:redirect url="CategoriesServlet?op=showByPage"></c:redirect>
							</c:if>
							<!-- 如果 范围内的list不为空，遍历数据并展示结果 -->
							<c:if test="${pd!=null}">
							<!-- 如果 范围内的list不为空，遍历数据并展示结果 -->
							<c:if test="${shopname!=null}">
								<c:forEach items="${shopname}" var="goods">
									<div class="product">
										<div class="product_image">
											<img src="${goods.cover}" alt="" name="goodsimg">
										</div>
										<div class="product_content">
											<div class="product_title">
												<a href="Good_details.jsp">${goods.goodsname}</a>
												<input type="text" value="${goods.goodscount}" style="display:none">
											</div>
											<div class="product_price">${goods.goodsprice}</div>
											<div class="product_title" style="top: 10px;">
												<a href="#" style="color: #0069D9; font-size: 12px;">${goods.shopname}</a>
												<input type="text" value="${goods.goodsinfo}" style="display:none">
											</div>
										</div>
									</div>
								</c:forEach>
							</c:if>
							</c:if>
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
							<!-- Product -->
						</div>
						<div class="product_pagination" style="padding-left:350px;">
							<div id="pagediv"></div>
						</div>

					</div>
				</div>
			</div>
		</div>

		<!-- Icon Boxes -->

		<div class="icon_boxes">
			<div class="container">
				<div class="row icon_box_row">

					<!-- Icon Box -->
					<div class="col-lg-4 icon_box_col">
						<div class="icon_box">
							<div class="icon_box_image">
								<img src="UserStyle/images/icon_1.svg" alt="">
							</div>
							<div class="icon_box_title">全国配送</div>
							<div class="icon_box_text">
								<p>广告招租</p>
							</div>
						</div>
					</div>

					<!-- Icon Box -->
					<div class="col-lg-4 icon_box_col">
						<div class="icon_box">
							<div class="icon_box_image">
								<img src="UserStyle/images/icon_2.svg" alt="">
							</div>
							<div class="icon_box_title">7天无条件退货</div>
							<div class="icon_box_text">
								<p>广告招租</p>
							</div>
						</div>
					</div>

					<!-- Icon Box -->
					<div class="col-lg-4 icon_box_col">
						<div class="icon_box">
							<div class="icon_box_image">
								<img src="UserStyle/images/icon_3.svg" alt="">
							</div>
							<div class="icon_box_title">24小时在线接单</div>
							<div class="icon_box_text">
								<p>广告招租</p>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>

		<!-- Footer -->

		<div class="footer_overlay"></div>
		<footer class="footer">
			<div class="footer_background"
				style="background-image: url(UserStyle/images/footer.jpg)"></div>
			<div class="container">
				<div class="row">
					<div class="col">
						<div
							class="footer_content d-flex flex-lg-row flex-column align-items-center justify-content-lg-start justify-content-center">
							<div class="footer_logo">
								<a href="#">FTM网上商城</a>
							</div>
							<div class="copyright ml-auto mr-auto">
								<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
								版权 &copy;
								<script>
									document.write(new Date().getFullYear());
								</script>
								由FTM网上商城开发者所有<i class="fa fa-heart-o" aria-hidden="true"></i> by
								FTM开发者 <a href="https://colorlib.com" target="_blank">官网</a>
								<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
							</div>
							<div class="footer_social ml-lg-auto">
								<ul>
									<li><a href="#"><i class="fa fa-pinterest"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-instagram"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-facebook"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"
											aria-hidden="true"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>
<script src="UserStyle/js/jquery-3.2.1.min.js"></script>
<script src="layui/layui.js"></script>
	<script type="text/javascript">
	layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
		  
		//完整功能
		  laypage.render({
		    elem: 'pagediv' // 分页的导航在哪里显示，pagediv是层id
		    ,theme: '#428bca'  //颜色
		    ,count: ${pd.totalCount} //总记录数
		    ,curr: ${pd.page}  //当前页
		    ,limit: ${pd.pageSize}//当前页显示的记录数
		    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
		    ,jump: function(obj, first){ //跳转页面时候的动作
			    //obj包含了当前分页的所有参数，比如：
			    // console.log(obj.curr); //得到当前页，向服务端请求对应页的数据。
			   // console.log(obj.limit); //得到每页显示的条数
			    
			    //首次不执行
			    if(!first){
			      //do something
			      location.href="CategoriesServlet?op=showByPage&page="+obj.curr+"&pageSize="+obj.limit+"&keyword="+$("#check").val();
			    }
			  }
		  });
		});
	
	$('img[name=goodsimg]').click(function(){
		console.log("点击图片");
		var img=$(this).attr("src");
		//var goodsname=$('input[name=goodsname]').val();
		var goodsname=$(this).parent().next().find('a:first').text();
		var shopname=$(this).parent().next().find('a:last').text();
		var goodsprice=$(this).parent().next().find('.product_price').text();
		var goodscount=$(this).parent().next().find('input:first').val();
		var goodsinfo=$(this).parent().next().find('input:last').val();
		console.log(img+"*****"+goodsname+"*****"+shopname+"*****"+goodsprice+"*****"+goodscount+"*****"+goodsinfo);
		location.href="Good_details.jsp?gname="+goodsname+"&sname="+shopname+"&price="+goodsprice+"&count="+goodscount+"&info="+goodsinfo+"&img="+img;
	})
	</script>


	<script src="UserStyle/styles/bootstrap4/popper.js"></script>
	<script src="UserStyle/styles/bootstrap4/bootstrap.min.js"></script>
	<script src="UserStyle/plugins/greensock/TweenMax.min.js"></script>
	<script src="UserStyle/plugins/greensock/TimelineMax.min.js"></script>
	<script src="UserStyle/plugins/scrollmagic/ScrollMagic.min.js"></script>
	<script src="UserStyle/plugins/greensock/animation.gsap.min.js"></script>
	<script src="UserStyle/plugins/greensock/ScrollToPlugin.min.js"></script>
	<script src="UserStyle/plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
	<script src="UserStyle/plugins/Isotope/isotope.pkgd.min.js"></script>
	<script src="UserStyle/plugins/easing/easing.js"></script>
	<script src="UserStyle/plugins/parallax-js-master/parallax.min.js"></script>
	<script src="UserStyle/js/categories.js"></script>
</body>
</html>